<template>
	<div>
		<div class="specs-border">
			<div v-if="goodsSpuSpecs && goodsSpuSpecs.length > 0">
				<div v-for="(item, index) in goodsSpuSpecs" :key="index">
					<div class="goods-specs-item">
						规格名：
						<el-select v-model="item.specsId" filterable allow-create placeholder="请输入规格名"
							@visible-change="visibleChange(item)" @change="changeSpecs(item, index)">
							<el-option v-for="item in specsList" :key="item.id" :label="item.name" :value="item.id"
								:disabled="item.disabled" />
						</el-select>
						<div style="float: right">
							<el-button circle @click="delSpecs(item, index)"><el-icon style="margin-right: 0px">
									<ele-CloseBold /> </el-icon></el-button>
						</div>
					</div>

					<div class="specs-value-list">
						规格值：
						<div v-for="(itemValue, indexValue) in item.goodsSkuSpecsValues" :key="indexValue">
							<el-tag style="margin: 10px" effect="plain" closable
								@close="delSpecsValue(indexValue, index)">{{ itemValue.specsValueName }}</el-tag>
							<select-material class="specs-image" v-if="index == 0" v-model="itemValue.picUrls"
								:canChooseImagesNum="1"></select-material>
						</div>

						<el-popover placement="bottom" :width="200" trigger="click">
							<el-select v-model="specsValueId" filterable allow-create placeholder="请输入规格值"
								@change="changeSpecsValue(specsValueId, index)">
								<el-option v-for="specsValueOption in specsValueList" :key="specsValueOption.id"
									:label="specsValueOption.name" :value="specsValueOption.id"
									:disabled="specsValueOption.disabled" />
							</el-select>
							<template #reference>
								<el-button type="primary" link @click="addSpecsValue(item.specsId, index)"
									v-if="item.specsId">添加规格值</el-button>
							</template>
						</el-popover>
					</div>
				</div>
			</div>
			<el-button @click="addSpecs" v-if="goodsSpuSpecs.length < 3">添加规格</el-button>
		</div>
		<div style="margin-top: 20px">
			<SkuTable ref="skuTable" :skusData="skusData" :goodsSpuSpecs="goodsSpuSpecsFilter" @getGoodsSkus="getGoodsSkus">
			</SkuTable>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs, computed, PropType } from 'vue';
import { getList as getSpecsValueList, addObj as addSpecsValueObj } from '/@/api/mall/goodsspecsvalue';
import SelectMaterial from '/@/components/selectMaterial/index.vue';
import SkuTable from './skuTable/index.vue';
import { addObj as addSpecsObj } from '/@/api/mall/goodsspecs';
export default defineComponent({
	components: { SelectMaterial, SkuTable },
	props: {
		specsList: {
			type: Object,
			default: {},
		},
		skusData: {
			type: Array,
			default: [],
		},
		goodsSpuSpecs: {
			type: Array as PropType<any[]>,
			default: [],
		},
	},
	setup(props, ctx) {
		const data = reactive({
			specsValueId: null,
			spuSpecs: [],
			specsValueList: [{ id: '', name: '', disabled: false }],
			visible: true,
		});
		const specsId = ref('');

		const getGoodsSkus = (skus: any) => {
			ctx.emit('getGoodsSkus', skus, props.goodsSpuSpecs);
		};
		/**
		 * 添加规格
		 */
		const addSpecs = (index: number) => {
			props.specsList.forEach(function (item: any) {
				props.goodsSpuSpecs.forEach(function (item2: any) {
					if (item.id == item2.specsId) {
						item.disabled = true;
					} else {
						item.disabled = false;
					}
				});
			});
			props.goodsSpuSpecs.push({
				specsId: '',
				specsName: '',
				goodsSkuSpecsValues: [],
			});
		};
		/**
		 * 添加规格值
		 */
		const addSpecsValue = (specsId: string, index: number) => {
			// 查询规格值
			getSpecsValueList({ specsId: specsId }).then((response) => {
				data.specsValueList = response.data.data;
				data.specsValueList.forEach(function (item: any) {
					props.goodsSpuSpecs[index].goodsSkuSpecsValues.forEach(function (valueItem: any) {
						if (valueItem.specsValueId == item.id) {
							item.disabled = true;
						}
					});
				});
			});
		};
		/**
		 * 选择规格事件
		 */
		const changeSpecs = (row: any, index: number) => {
			let isNew = true;
			props.specsList.forEach(function (item: any) {
				if (item.id == row.specsId) {
					isNew = false;
					props.goodsSpuSpecs[index].specsName = item.name;
				}
			});

			// 新增
			if (isNew) {
				addSpecsObj({ name: row.specsId }).then((res) => {
					let specsObj = res.data.data;
					props.specsList.push(specsObj);
					props.goodsSpuSpecs[index].specsName = specsObj.name;
					props.goodsSpuSpecs[index].specsId = specsObj.id;
				});
			}
			// 清空规格值
			props.goodsSpuSpecs[index].goodsSkuSpecsValues = [];
		};
		/**
		 * 选择规格值事件
		 */
		const changeSpecsValue = (specsValueId: string | null, index: number) => {
			let isNew = true;
			data.specsValueList.forEach(function (item: any) {
				if (item.id == specsValueId) {
					isNew = false;
					item.disabled = true;
					props.goodsSpuSpecs[index].goodsSkuSpecsValues.push({
						specsValueId: item.id,
						specsValueName: item.name,
						picUrls: [],
					});
				}
			});
			// 新增
			if (isNew) {
				addSpecsValueObj({
					name: specsValueId,
					specsId: props.goodsSpuSpecs[index].specsId,
				}).then((res) => {
					let specsObj = res.data.data;
					props.goodsSpuSpecs[index].goodsSkuSpecsValues.push({
						specsValueId: specsObj.id,
						specsValueName: specsObj.name,
						picUrls: [],
					});
				});
			}
			data.specsValueId = null;
		};
		/**
		 * 删除规格
		 */
		const delSpecs = (row: any, index: number) => {
			props.specsList.forEach(function (item: any) {
				if (item.id == row.specsId) {
					item.disabled = false;
				}
			});
			props.goodsSpuSpecs.splice(index, 1);
		};
		/**
		 * 删除规格值
		 */
		const delSpecsValue = (index: number, specsIndex: number) => {
			props.goodsSpuSpecs[specsIndex].goodsSkuSpecsValues.splice(index, 1);
		};
		const goodsSpuSpecsFilter = computed(() => {
			return props.goodsSpuSpecs.filter(
				(item: any) => item.specsId && item.specsName && item.goodsSkuSpecsValues && item.goodsSkuSpecsValues.length > 0
			);
		});
		const visibleChange = (val: boolean) => {
			if (val) {
				props.specsList.forEach(function (item: any) {
					item.disabled = false;
					props.goodsSpuSpecs.forEach(function (item2: any) {
						if (item.id == item2.specsId) {
							item.disabled = true;
						}
					});
				});
			}
		};
		return {
			specsId,
			goodsSpuSpecsFilter,
			addSpecs,
			delSpecs,
			changeSpecs,
			getGoodsSkus,
			delSpecsValue,
			visibleChange,
			addSpecsValue,
			changeSpecsValue,
			...toRefs(data),
		};
	},
});
</script>
<style lang="scss" scoped>
.specs-border {
	border: 1px solid #e5e5e5;
	padding: 20px;
}

.specs-value-select {
	padding: 10px;
	width: 100px;
}

.specs-value-list {
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.goods-specs-item {
	background-color: #f7f8fa;
	padding: 20px;
}

.specs-image {
	display: flex;
	justify-content: center;
	margin-right: 0px;
}
</style>
